<template>
  <div>
    <div class="subTitle">
      <span class="setTitle">指标配置</span>
      <span class="setInfo"
        >（已启用{{ useTotal }}项评分指标，合计分值{{
          calcTotalScore
        }}分）</span
      >
      <el-button
        v-if="isShowUpdate"
        @click="updateStandartSet"
        class="commonBut saveBtn funComBut"
        >发布配置</el-button
      >
      <span class="setInfo" style="float: right; margin-right: 20px"
        >上次发布时间：{{ updateTime || '--' }}</span
      >
    </div>
    <div class="setDetail clearFloat">
      <div style="width: 280px; float: left; margin-right: 5px">
        <ul class="setTabs">
          <li
            v-for="(v, i) in standardList"
            :key="i"
            :class="currentIndex === i ? 'active tabLi' : 'tabLi'"
            @click="changeTabs(i, v.id)"
          >
            <el-checkbox
              v-model="v.effectStatus"
              :true-label="1"
              :false-label="0"
              v-on:click.stop.native
            ></el-checkbox>
            <span>{{ v.name }}</span>
            <span
              :class="currentIndex === i ? 'hasUsed status' : 'notUsed status'"
              >{{ v.effectStatus ? '已启用' : '未启用' }}</span
            >
            <i
              class="el-icon-caret-left"
              style="
                position: absolute;
                right: -9px;
                top: 6px;
                color: #fff;
                font-size: 24px;
              "
              v-show="currentIndex === i"
            ></i>
          </li>
        </ul>
      </div>
      <div style="float: left; width: calc(100% - 285px)">
        <standardSetDetail
          v-if="isDetail"
          :scoreDimType="scoreDimType"
          :standardDetailId="standardDetailId"
          :standardSetInfo="standardSetInfo"
          @updateStandardList="getStandardList(scoreDimType)"
        ></standardSetDetail>
      </div>
    </div>
    <el-dialog
      title="注意"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <span>请确认配置的指标都已保存，如已保存，确认发布配置？</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="centerDialogVisible = false"
          class="commonBut funComBut"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="standardSetSubmit"
          class="commonBut saveBtn funComBut"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
import standardSetDetail from './standardSetDetail'
export default {
  name: 'standardSetTabs',
  props: {
    scoreDimType: {
      type: String,
      default: '',
    },
  },
  components: {
    standardSetDetail,
  },
  watch: {
    async scoreDimType(newValue, oldValue) {
      await this.getStandardList(this.scoreDimType)
      this.standardSetInfo = this.standardList[0]
      this.standardDetailId = this.standardList[0].standardDetailId
      this.currentIndex = 0
    },
  },
  computed: {
    useTotal() {
      let total = 0
      this.standardList.forEach((v) => {
        if (v.effectStatus) {
          total++
        }
      })
      return total
    },
    calcTotalScore() {
      let totalScore = 0
      this.standardList.forEach((v) => {
        if (v.effectStatus) {
          v.schemes.forEach((item) => {
            if (item.chooseStatus) {
              totalScore += Number((item.score * 100).toFixed(0))
            }
          })
        }
      })
      return totalScore / 100
    },
  },
  filterField: {
    checkStatus(val) {},
  },
  data() {
    return {
      standardList: [],
      updateTime: '',
      standardDetailId: '',
      standardSetInfo: {},
      currentIndex: 0,
      centerDialogVisible: false,
      isDetail: false,
      isShowUpdate: '',
    }
  },
  async created() {
    await this.getStandardList(this.scoreDimType)
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('standardSet:update') > -1
  },
  methods: {
    // 获取指标项列表
    getStandardList(type) {
      this.isDetail = false
      return this.axios({
        method: 'post',
        url: '/api-ps/creditIndex/expand/getCreditIndexList',
        data: { type },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.standardList = response.data.result
            // this.currentIndex = 0;
            this.standardSetInfo = this.standardList[this.currentIndex]
            this.standardDetailId = this.standardList[this.currentIndex].id
            this.isDetail = true
            let firstIndex = this.standardList.findIndex((v) => v.effectStatus)
            this.updateTime = this.standardList[firstIndex].publishTime
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 切换指标项
    changeTabs(index, id) {
      this.currentIndex = index
      this.standardDetailId = id
      this.standardSetInfo = this.standardList.find((v) => v.id === id)
    },
    // 发布配置二次确认
    updateStandartSet() {
      // this.centerDialogVisible = true;
      this.$confirm(
        '请确认配置的指标都已保存，如已保存，确认发布配置？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          // callback: action => {
          //     this.standardSetSubmit()
          // },
        }
      )
        .then(() => {
          this.standardSetSubmit()
        })
        .catch(() => {})
    },
    // 发布配置
    standardSetSubmit() {
      // this.centerDialogVisible = false;
      let sum = 0
      let idList = []
      let flag = true
      // let filterList = this.standardList.filter((v) => {
      //     if (v.effectStatus) {
      //         return v;
      //     }
      // });
      // console.log(filterList);
      this.standardList.forEach((v) => {
        if (v.effectStatus) {
          idList.push(v.id)
          v.schemes.forEach((item) => {
            if (item.chooseStatus) {
              sum += Number((item.score * 100).toFixed(0))
              if (!item.isSave) {
                flag = false
              }
            }
          })
        }
      })
      if (sum === 10000) {
        if (flag) {
          this.axios({
            method: 'post',
            url: '/api-ps/creditIndex/expand/publish',
            data: {
              type: this.scoreDimType,
              indexIds: JSON.stringify(idList),
            },
          })
            .then((response) => {
              if (response.data.hasError) {
                this.$message.error(response.data.errorMsg)
              } else {
                this.$message.success('发布成功')
                // this.currentIndex = 0;
                this.getStandardList(this.scoreDimType)
              }
            })
            .catch((error) => {
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.$message.error('请先保存要发布的指标配置')
        }
      } else {
        this.$message.error('启用的指标配置分值之和应为100')
      }
    },
  },
}
</script>

<style scoped lang="less">
.subTitle {
  height: 58px;
  background: #f5f7fb;
  padding-left: 24px;
  .setTitle {
    line-height: 58px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
  }
  .setInfo {
    line-height: 58px;
    font-size: 14px;
    color: #4c4c4c;
  }
  /deep/ .el-button {
    float: right;
    margin-top: 11px;
    margin-right: 24px;
  }
}
.clearFloat:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.setDetail {
  margin-top: 5px;
  .setTabs {
    background: #f5f7fb;
    .tabLi {
      height: 36px;
      padding: 0 16px;
      font-size: 14px;
      color: #3a3a3a;
      line-height: 36px;
      position: relative;
    }
    // .active {
    //     background: rgba(0, 149, 136, 0.1);
    //     color: #009588;
    // }
    .hasUsed {
      font-size: 14px;
      // color: #009588;
    }
    .notUsed {
      font-size: 14px;
      color: #d2d2d2;
    }
    .status {
      float: right;
    }
    /deep/.el-checkbox__inner {
      width: 16px;
      height: 16px;
      // &:hover {
      //     border-color: #009588;
      // }
    }
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      // background-color: #009588;
      // border-color: #009588;
      width: 16px;
      height: 16px;
      &::after {
        height: 8px;
        width: 4px;
        top: 0px;
        left: 4px;
        border-width: 2px;
      }
    }
  }
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
/deep/.el-dialog__footer::after {
  display: none;
}
</style>
